<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <title>系统用户列表</title>

    <div th:include="common :: commonheader"></div>
  </head>
  <body class="sticky-header">
    <section>
      <!-- 左边开始-->
      <div th:replace="~{common::leftmenu(index=2,active='userList')}"></div>
      <!-- 左边结束-->

      <!--主要内容开始-->
      <div class="main-content">

        <!-- 头部分开始-->
        <div th:replace="common :: headermenu"></div>
        <!-- 头部分结束-->

        <!-- 页面标题开始-->
        <div class="page-heading">
          <h3>
            面板
          </h3>
          <ul class="breadcrumb">
            <li>
              <a href="#">系统用户管理</a>
            </li>
            <li class="active"> 系统用户列表</li>
          </ul>
        </div>
        <!-- 页面标题结束-->

        <!--页面主体开始-->
        <div class="wrapper">
          <div class="row">
            <div class="col-sm-12">
              <section class="panel">
                <header class="panel-heading">
                  查询条件
                </header>
                <div class="panel-body">
                  <!-- 查询表单开始-->
                  <form class="form-horizontal" role="form" th:action="@{/userList}" method="get">
                    <div class="row">
                      <div class="col-md-5">
                        <div class="form-group">
                          <label class="control-label col-md-3">部门：</label>
                          <div class="col-md-4">
                            <select class="form-control" name="departmentid" />
                            <div th:each="department:${departmentList}">
                              <option th:value="${department.id}" th:selected="${(department.id==session.departmentid)? true : false}">[[${department.name}]]</option>
                            </div>
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-5">
                        <div class="form-group">
                          <label class="control-label col-md-3">关键字：</label>
                          <div class="col-md-4">
                            <input class="form-control" name="keyword" type="text" placeholder="输入关键字..."/>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-2">
                        <div class="form-group">
                          <button type="submit" class="btn btn-primary">查询</button>
                        </div>
                      </div>
                    </div>
                  </form>
                  <!-- 查询表单结束-->
                </div>
              </section>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <section class="panel">
                <header class="panel-heading">
                  系统用户列表
                  <span class="tools pull-right">
                    <!-- 新增按钮开始-->
                    <div class="clearfix" style="margin-bottom: 10px">
                      <div class="btn-group">
                        <button class="btn btn-info" data-target="#myModal"
                                data-toggle="modal" type="button">
                          <i class="fa fa-plus"></i> 新增
                        </button>
                      </div>
                    </div>
                    <!-- 新增按钮结束-->
                  </span>
                </header>
                <div class="panel-body">
                  <div class="adv-table">
                    <table class="display table table-bordered table-striped" id="dynamic-table">
                    <thead>
                    <tr>
                      <th>#</th>
                      <th>用户Id</th>
                      <th>用户名</th>
                      <th>登录密码</th>
                      <th>所属部门</th>
                      <th>创建时间</th>
                      <th>修改时间</th>
                      <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="gradeA" th:each="user,stats:${page.records}">
                      <td th:text="${stats.count}"></td>
                      <td th:text="${user.id}"></td>
                      <td th:text="${user.username}"></td>
                      <td th:text="${user.password}"></td>
                      <td th:text="${user.departmentname}"></td>
                      <td th:text="${#dates.format(user.createTime, 'yyyy-MM-dd HH:mm')}"></td>
                      <td th:text="${#dates.format(user.updateTime, 'yyyy-MM-dd HH:mm')}"></td>
                      <td class="center">
                        <button data-toggle="modal" data-target="#myEditModal" th:data-id="${user.id}" th:data-name="${user.username}"
                                th:data-pn="${page.current}" th:data-password="${user.password}" th:data-departmentid="${user.departmentid}"
                                class="btn btn-default btn-sm" type="button">编辑
                        </button>
                        <button th:onclick="|javascript:deleteUser(${user.id},${page.current})|"
                                class="btn btn-danger btn-sm" type="button">删除
                        </button>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                  </div>
                  <div class="row-fluid">
                    <div class="span6">
                      <div class="dataTables_info" id="dynamic-table_info">当前第 [[${page.current}]] 页 总计
                        [[${page.pages}]] 页 共 [[${page.total}]] 条记录
                      </div>
                    </div>
                    <div class="span6">
                      <div class="dataTables_paginate paging_bootstrap pagination">
                        <ul>
                          <li th:class="${page.current - 1 < 1 ? 'prev disabled':'prev'}">
                            <a th:href="@{/userList(pn=${page.current - 1})}">← 前一页</a>
                          </li>
                          <li th:class="${num == page.current?'active':''}"
                              th:each="num :${#numbers.sequence(1,page.pages)}">
                            <a th:href="@{/userList(pn=${num})}">[[${num}]]</a>
                          </li>
                          <li th:class="${page.current + 1 > page.pages ? 'next disabled':'next'}">
                            <a th:href="@{/userList(pn=${page.current + 1})}">后一页 → </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
        <!--页面主体结束-->

        <!--页脚开始-->
        <div th:replace="common :: footer"></div>
        <!--页脚结束-->

      </div>
      <!--主要内容结束-->
    </section>

    <!-- AddModal -->
    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal"
         role="dialog" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-hidden="true" class="close" data-dismiss="modal"
                    type="button">&times;
            </button>
            <h4 class="modal-title">新增用户信息</h4>
          </div>
          <div class="modal-body row" id="model-body">

            <section class="panel">
              <div class="panel-body">
                <form th:action="@{/addUser}" method="post">
                  <div class="form-group">
                    <label for="exampleInputName">用户名</label>
                    <input class="form-control" id="exampleInputName" name="username" placeholder="输入用户名..."
                           type="text"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword">密码</label>
                    <input class="form-control" id="exampleInputPassword" name="password" placeholder="输入登录密码..."
                           type="text"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputDepartmentId">部门</label>
                    <div id="exampleInputDepartmentId">
                      <select class="form-control m-bot15" name="departmentid" />
                      <div th:each="department:${departmentList}">
                        <option th:value="${department.id}">[[${department.name}]]</option>
                      </div>
                      </select>
                    </div>
                  </div>
                  <button class="btn btn-lg btn-block btn-success" type="submit">
                    <i class="fa fa-check"></i>
                  </button>
                </form>
              </div>
            </section>

          </div>
        </div>
      </div>
    </div>
    <!-- AddModal -->

    <!-- EditModal -->
    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myEditModal"
         role="dialog" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-hidden="true" class="close" data-dismiss="modal"
                    type="button">&times;
            </button>
            <h4 class="modal-title">编辑用户信息</h4>
          </div>
          <div class="modal-body row" id="model-body 2">

            <section class="panel">
              <div class="panel-body">
                <form th:action="@{/updateUser}" method="post">
                  <input class="form-control" id="pn" name="pn"
                         type="hidden" readonly/>
                  <div class="form-group">
                    <label for="exampleInputUId">用户ID</label>
                    <input class="form-control" id="exampleInputUId" name="id"
                           type="text" readonly/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputUName">用户名</label>
                    <input class="form-control" id="exampleInputUName" name="username" placeholder="输入用户名..."
                           type="text" required/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputUPassword">密码</label>
                    <input class="form-control" id="exampleInputUPassword" name="password" placeholder="输入用户密码..."
                           type="text" required/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputUDepartmentId">部门</label>
                    <div id="exampleInputUDepartmentId">
                      <select class="form-control m-bot15" id="departmentid" name="departmentid" />
                      <div th:each="department:${departmentList}">
                        <option th:value="${department.id}">[[${department.name}]]</option>
                      </div>
                      </select>
                    </div>
                  </div>
                  <button class="btn btn-lg btn-block btn-success" type="submit">
                    <i class="fa fa-check"></i>
                  </button>
                </form>
              </div>
            </section>

          </div>
        </div>
      </div>
    </div>
    <!-- EditModal -->

    <!-- 最后把js文件的页面加载速度 -->
    <div th:replace="common :: #commonscript"></div>

    <script type="text/javascript">
      function deleteUser(contentid, pn) {

        var json = {
          id: contentid,
          pn: pn
        }

        if (confirm("你确定要删除吗？")) {

          //如果是true ，那么就做删除操作做

          $.ajax({
            url: "/deleteUser",
            data: json,
            type: "GET",
            contentType: 'application/json;charset=UTF-8',
            cache: "false",
            dataType: "text",
            success: function () {
              alert("删除成功！");
              // 删除成功后刷新页面
              window.location.reload();
            },
            error: function () {
              alert("删除失败！");
            }
          });

        } else {

          //否则说明下了

          alert("取消删除");

        }
      }
    </script>

    <!--编辑拟态框的加载数据-->
    <script type="text/javascript">
      $('#myEditModal').on('show.bs.modal', function (event) {
        let button = $(event.relatedTarget) // Button that triggered the modal
        let id = button.data('id') // Extract info from data-* attributes
        let name = button.data('name') // Extract info from data-* attributes
        let password = button.data('password') // Extract info from data-* attributes
        let departmentid = button.data('departmentid') // Extract info from data-* attributes
        let pn = button.data('pn')
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        // console.log(id + name)
        let modal = $(this)
        modal.find('#pn').val(pn)
        modal.find('#exampleInputUId').val(id)
        modal.find('#exampleInputUName').val(name)
        modal.find('#exampleInputUPassword').val(password)
        modal.find('#departmentid').val(departmentid)
      })
    </script>
    <!--编辑拟态框加载数据结束-->

  </body>
</html>